<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="baidu-site-verification" content="codeva-vVH2SQgagI" />
  <meta name=keywords
    content="blog的个人简历,blog个人简历,blog的个人简历,blog个人简历,blog,node,bolg,vue.js,blog个人工作主页,blog的个人工作主页,blog个人工作主页,blog的个人工作主页">
  <meta name=description
    content="blog的个人简历,blog个人简历,blog的个人简历,blog个人简历,vue.js,blog个人工作主页,blog的个人工作主页,blog个人工作主页,blog的个人工作主页">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  <!--前端脚本-->
<script type="text/javascript" src="assets/js/vue.min.js"></script>
  


  <!--==================== UNICONS 图标====================-->
  <link
          rel="stylesheet"
          href="https://unicons.iconscout.com/release/v3.0.6/css/line.css"
  />
  <!--==================== SWIPER CSS ====================-->
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css"/>

  <!--==================== CSS ====================-->
  <link rel="stylesheet" href="assets/css/styles.css"/>
  <!-- iconfont font class 方式引用图标 -->
  <!-- <link
    rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_3900458_82z46p85im.css"
  /> -->

  <title>blog个人简历</title>
</head>

<body >
 <div id="box" width="auto" height="auto"> 
<!--==================== HEADER ====================-->
<header class="header scroll-header" id="header" >
  <nav class="nav container">
    <a href="#" class="nav__logo"><img src="assets/img/logo.png"></a>
    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list grid">
        <li class="nav__item">
          <a href="#home" class="nav__link">
            <i class="uil uil-estate nav__icon"></i>
            <p i18n="home">主页</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#about" class="nav__link">
            <i class="uil uil-user nav__icon"></i>
            <p i18n="about">关于</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#skills" class="nav__link">
            <i class="uil uil-file-alt nav__icon"></i>
            <p i18n="skills">技能</p>
          </a>
        </li>
         <li class="nav__item">
          <a href="#qualification" class="nav__link">
            <i class="uil uil-file-alt nav__icon"></i>
            <p i18n="skills">资历</p>
          </a>
        </li>
        <li class="nav__item">
          <a href="#project" class="nav__link">
            <i class="uil uil-file-alt nav__icon"></i>
            <p i18n="skills">项目经验</p>
          </a>
        </li>
        
        <li class="nav__item">
          <a href="#contact" class="nav__link">
            <i class="uil uil-message nav__icon"></i>
            <p i18n="contact">联系方式</p>
          </a>
        </li>
      </ul>
      <i class="uil uil-times nav__close" id="nav-close"></i>
    </div>

    <div class="nav__btns">
      <i class="uil uil-moon change-theme" id="theme-button"></i>
      <div class="nav__toggle" id="nav-toggle">
        <i class="uil uil-apps"></i>
      </div>
    </div>
  </nav>
</header>

<!--==================== MAIN ====================-->
<main class="main">
  <!--==================== HOME ====================-->
  <section class="home section" id="home">
    <div class="home__container container grid">
      <div class="home__content grid">
        <div class="home__social">
          <a
                  @click="goBlog"
                  href="JavaScript：void(0)"
                  target="_blank"
                  class="home__social-icon"
                  title="blog的个人博客"
          >
            <img src="assets/svg/blog.svg"/>
          </a>
          <a
                  href="https://gitee.com/gitblog"
                  target="_blank"
                  class="home__social-icon"
                  title="blog的代码仓库"
          >
            <img src="assets/svg/gitee.svg"/>
          </a>
        </div>

        <div class="home__img">
          <svg
                  class="home__blob"
                  viewBox="0 0 200 187"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <mask id="mask0" mask-type="alpha">
              <path
                      d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547
                                130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
                                97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
                                0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"
              />
            </mask>
            <g mask="url(#mask0)">
              <path
                      d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346
                                165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
                                129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
                                -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"
              />
              <image
                      class="home__blob-img"
                      x="0"
                      y="-30"
                      xlink:href="assets/img/cat.png"
              />
            </g>
          </svg>
        </div>

        <div class="home__data">
          <h1 class="home__title" i18n="home__title">
            Hi, I'm
            <h1 class="home__name" i18n="home__name">{{personal.name}}</h1>
          </h1>
          <h3 class="home__subtitle" i18n="home__subtitle">
            {{personal.post}}
          </h3>
          <p class="home__description" i18n="home__description">
            {{personal.motto}}
          </p>
         <a href="#contact" class="button button-flex">
            <span i18n="home__contact">与我联系</span>
            <i class="uil uil-message button__icon"></i>
          </a>
        </div>
      </div>
      <div class="home__scroll">
        <a href="#about" class="home__scroll-button button--flex">
          <i class="uil uil-mouse-alt-2 home__scroll-mouse"></i>
          <span class="home__scroll-name" i18n="home__scroll-name"
          >往下滑</span
          >
          <i class="uil uil-arrow-down home__scroll-arrow"></i>
        </a>
      </div>
    </div>
  </section>

  <!--==================== ABOUT ====================-->
  <section class="about section" id="about">
    <h2 class="section__title" i18n="about__title">关于我</h2>
    <span class="section__subtitle" i18n="about__subtitle"
    >简单介绍</span
    >
    <div class="about__container container grid">
      <img src="assets/img/about.png" alt="" class="about__img"/>

      <div class="about__data">
        <p class="about__description" i18n="about__description">
         {{personal.selfIntroduction}}
        </p>

        <div class="about__info">
          <div>
            <span class="about__info-title">{{1900.09}}</span>
            <span class="about__info-name" i18n="about__info-name1">出生 <br />
              年月</span>
          </div>
          <div>
            <span class="about__info-title">{{personal.workYears}}+</span>
            <span class="about__info-name" i18n="about__info-name1"
            >年工作 <br/>
                  经验</span
            >
          </div>

          <div>
            <span class="about__info-title">{{personal.projectItems}}+</span>
            <span class="about__info-name" i18n="about__info-name2"
            >完整 <br/>
                  项目</span
            >
          </div>

          <div>
            <span class="about__info-title">{{personal.companyNum}}</span>
            <span class="about__info-name" i18n="about__info-name3"
            >公司 <br/>
                  任职</span
            >
          </div>
        </div>

 <div class="about__buttons">
         <!--<a download="" href="assets/pdf/简历.pdf"  class="button button&#45;&#45;flex" target="_blank" >
              <span i18n="download">预览/下载简历</span>
            <i class="uil uil-download-alt button__icon"></i>
         </a>-->
       </div> 
      </div>
    </div>
  </section>

  <!--==================== SKILLS ====================-->
  <section class="skills section" id="skills">
    <h2 class="section__title" i18n="section__title">技能</h2>
    <span class="section__subtitle" i18n="section__subtitle"
    >掌握技能及专业水平</span
    >

    <div class="skills__container container grid">
      <div>
        <!--==================== SKILLS 1 ====================-->
        <div class="skills__content skills__open">
          <div class="skills__header">
            <i class="uil uil-brackets-curly skills__icon"></i>

            <div>
              <h1 class="skills__title" i18n="skills__title">
                掌握技能
              </h1>
              <span class="skills__subtitle" i18n="skills__years"
              ></span
              >
            </div>

            <i class="uil uil-angle-down skills__arrow"></i>
          </div>

          <div class="skills__list grid" style="row-gap: 0.1rem;">
            <div class="skills__data" v-for="(v,index) in skillList">
              <div class="skills__titles">
                {{index+1}}:{{v.name}}
              </div>
            </div>
          </div>
        </div>
        <!--==================== SKILLS 2 ====================-->
        <div class="skills__content skills__close">
          <div class="skills__header">
            <i class="uil uil-server-network skills__icon"></i>
            <div>
              <h1 class="skills__title" i18n="skills__title2">
                专业水平
              </h1>
              <span class="skills__subtitle" i18n="skills__years2"
              ></span
              >
            </div>

            <i class="uil uil-angle-down skills__arrow"></i>
          </div>
          <div class="skills__list grid">
            <div class="skills__data" v-for="v in specialityList">
              <div class="skills__titles">
                <h3 class="skills__name">{{v.name}}</h3>
                <span class="skills__number">{{v.skilled}}%</span>
              </div>
              <div class="skills__bar">
                <div class="skills__percentage skills__java" :style="v.style"></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!--==================== QUALIFICATION ====================-->
  <section class="qualification section" id="qualification">
    <h2 class="section__title" i18n="qualification__title">
      资历
    </h2>
    <span class="section__subtitle" i18n="qualification__subtitle" >{{qualification__active =='education'?'教育经历':'工作经历'}}</span>
    <div class="qualification__container container">
      <div class="qualification__tabs">
        <div  class="qualification__button button--flex "  :class="qualification__active =='education'?'qualification__active':''" 
        data-target="#education" @click="qualificationSwitch('education')">
          <i class="uil uil-graduation-cap qualification__icon"></i>
          <span i18n="education">教育</span>
        </div>

       <div class="qualification__button button--flex " :class="qualification__active =='work'?'qualification__active':''"
        data-target="#work" @click="qualificationSwitch('work')">
        <i class="uil uil-briefcase-alt qualification__icon"></i>
          <span i18n="work">工作</span>
        </div>
      </div>
      <div class="qualification__sections">
        <!--==================== QUALIFICATION CONTENT 1 ====================-->
        <div class="qualification__content" :class="qualification__active =='education'?'qualification__active':''"  data-content id="education" >
          <!--==================== QUALIFICATION 1 ====================-->
          <div class="qualification__data" v-for="v in eduExperience">
            <div >
              <h3 class="qualification__title" i18n="qualification1__title">
                {{v.position}}
              </h3>
              <span
                      class="qualification__subtitle"
                      i18n="qualification1__subtitle"
              >{{v.unit}}</span
              >
              <div class="qualification__calendar">
                <i class="uil uil-calendar-alt"></i>
        
              {{v.start_time}} - {{v.end_time}}
              </div>
            </div>

            <div>
              <span class="qualification__rounder"></span>
                <span class="qualification__line"></span>
            </div>
          </div>
          
        </div>
        <!--==================== QUALIFICATION CONTENT 2 ====================-->
        <div class="qualification__content" :class="qualification__active =='work'?'qualification__active':''" data-content id="work">
          <!--==================== QUALIFICATION 1 ====================-->
          <div class="qualification__data" v-for="v in workExperience">
            <div></div>
            <div>
              <span class="qualification__rounder"></span>
              <span class="qualification__line"></span>
            </div>
            <div>
              <h3 class="qualification__title" i18n="qualification4__title">
                {{v.position}}
              </h3>
              <span
                      class="qualification__subtitle"
                      i18n="qualification4__subtitle"
              >{{v.unit}}</span
              >
              <div class="qualification__calendar">
                <i class="uil uil-calendar-alt"></i>
                {{v.start_time}} - {{v.end_time ? v.end_time : '至今'}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--==================== PORTFOLIO ====================-->
  <section class="portfolio section" id="project">
<h2 class="section__title" i18n="portfolio__title">项目经验</h2>
<span class="section__subtitle" i18n="portfolio__subtitle"></span>
<div class="portfolio__container container swiper-container">
  <div class="swiper-wrapper">

    <div class="portfolio__content grid swiper-slide" v-for="v in projectList">
  
     
      <div class="portfolio_">
        <h3 class="portfolio__title" i18n="portfolio1__title">
          {{v.name}}
        </h3>
        <p  v-if="v.link"><b>项目链接：</b><span @click="goProLink(v.link)" style="color: #0080FF;cursor: pointer;">{{v.link}}</span></p>
        <p  class="portfolio__description" i18n="portfolio1__description" >
          <b>项目描述：</b>{{v.description}}
        </p>
        <!--<p class="cycle" v-if="v.link"><b>项目周期：</b>{{v.startTime}}-{{v.endTime?v.endTime:'至今'}}</p>-->
        
      </div>
       <div class="portfolio__duty">
        <b>项目职责：</b>{{v.duty}}
      </div>
    </div>
  </div>
  <div class="swiper-button-next">
    <i class="uil uil-angle-right-b swiper-portfolio-icon"></i>
  </div>
  <div class="swiper-button-prev">
    <i class="uil uil-angle-left-b swiper-portfolio-icon"></i>
  </div>
  <div class="swiper-pagination"></div>
</div>
</section>

  <!--==================== CONTACT ME ====================-->
 <section class="contact section" id="contact">
    <h2 class="section__title" i18n="contact__title">联系方式</h2>
    <span class="section__subtitle" i18n="contact__subtitle"
    >与我联系</span
    >

    <div class="contact__container container grid">
      <div>
        <div class="contact__information">
          <i class="uil uil-comments contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="wechat">微信/电话</h3>
           <span class="contact__subtitle" i18n="wechat__number"
            >{{personal.phone}}</span
            >
          </div>
        </div>

        <div class="contact__information">
          <i class="uil uil-user contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="qq">QQ</h3>
            <span class="contact__subtitle" i18n="qq__number"
            ><a target="_blank" :href=`http://wpa.qq.com/msgrd?v=3&uin=${personal.QQ}&site=qq&menu=yes`>{{personal.QQ}}(点击在线交谈)</a></span
            >
          </div>
        </div>

        <div class="contact__information">
          <i class="uil uil-envelope contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="email">E-mail</h3>
            <span class="contact__subtitle" i18n="email__address"
            >{{personal.email}}</span
            >
          </div>
        </div>
        <div class="contact__information">
          <i class="uil uil-map-marker contact__icon"></i>

          <div>
            <h3 class="contact__title" i18n="location">位置</h3>
            <span class="contact__subtitle" i18n="location__detail"
            >{{personal.position}}</span
            >
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!--==================== FOOTER ====================-->
<footer class="footer">
  <div class="footer__bg">
    <div class="footer__container container grid">
      <div>
        <h1 class="footer__title" i18n="home__name">{{personal.name}}</h1>
        <span class="footer__subtitle" i18n="home__subtitle">{{personal.post}}</span>
      </div>

     <div class="footer__socials">
        
        <a
                   @click="goBlog"
                  href="JavaScript：void(0)"
                  target="_blank"
                  class="home__social-icon"
                  title="blog的个人博客"
          >
            <img src="assets/svg/blogger.svg"/>
          </a>
          <a
                  href="https://gitee.com/gitblog"
                  target="_blank"
                  class="home__social-icon"
                  title="blog的代码仓库"
          >
 
            <img src="assets/svg/gitee.svg"/>
          </a>
      </div>
    </div>

    <p class="footer__copy">
      <a
              class="footer__copy"
              href="https://beian.miit.gov.cn"
              target="_blank"
              
      >&#169; 粤ICP备2023063724号</a>
    </p>
  </div>
</footer>

<!--==================== SCROLL TOP ====================-->
<a href="#" class="scrollup" id="scroll-up">
  <i class="uil uil-arrow-up scrollup__icon"></i>
</a>
</div>
<!--==================== SWIPER JS ====================-->
<script src="assets/js/swiper-bundle.min.js"></script>

<!-- iconfont JS -->
<script src="assets/js/iconfont.js"></script>
<!-- jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="assets/js/jquery.i18n.min.js"></script>
<!--==================== MAIN JS ====================-->



<script>  
        var app = new Vue({  
            el: '#box',  
            data: {  
              qualification__active:'work',
              personal:{
                "name":'blog',
                "post":'软件工程师',
                "motto": "不内卷是程序员的自我修养",
                "workYears": 5,
                "projectItems": 10,
                "companyNum": 3,
                "head": null,
                "phone": "15321360918",
                "email": "blog164@163.com",
                "QQ": "778452194",
                "position": "广东省,广州市",
                "age": null,
                "birthDate": null,
                "school": null,
                "major": null,
                "education": null
              },
              skillList:[],
              workExperience:[],
              eduExperience: [],
              specialityList:[],
              projectList:[]
            },  
            components: {  
               
            },  
            created() {
          
                this.getProject()
               this.getExperience()
               this.getInformation()
               this.getSkill()
               this.getSpeciality()

            },
           
          mounted(){ 
              this.recordVisitor()
         
          },
            methods: {
               os() {//0：手机端 1：PC端 2：平板端
                      var ua = navigator.userAgent;
                      isWindowsPhone = /(?:Windows Phone)/.test( ua ),
                      isSymbian = /(?:SymbianOS)/.test( ua ) || isWindowsPhone,
                      isAndroid = /(?:Android)/.test( ua ),
                      isFireFox = /(?:Firefox)/.test( ua ),
                      isChrome = /(?:Chrome|CriOS)/.test( ua ),
                      isTablet = /(?:iPad|PlayBook)/.test( ua ) || ( isAndroid && !/(?:Mobile)/.test( ua ) ) || ( isFireFox && /(?:Tablet)/.test( ua ) ),
                      isPhone = /(?:iPhone)/.test( ua ) && !isTablet,
                      isPc = !isPhone && !isAndroid && !isSymbian;
                      if( isAndroid || isPhone ) {
                        return 0
            } else if ( isPc ) {
                          return 1
                        } else if ( isTablet ) {
                          return 2
                        }
              },
              goProLink(url){
                  window.open(url,"_blank")
              },
              goBlog(e){
                console.log( e )
                e.preventDefault()
                let os = this.os()
                if( os  == 1){
                  window.open('https://blog.blog.ac.cn',"_blank")
                }else if( os == 0){
                  window.open( 'http://mobile.blog.ac.cn', "_self" )
                } else if ( os == 2 ) {
                   window.open( 'https://blog.blog.ac.cn', "_self" )
                }
                
              },
              recordVisitor(){
                 $.ajax( {
                  url: '/api/public/common/visitor/record',
                  type: "POST",
                  data:{type:5},
                } );
              },
              async getInformation() {
                //console.log( "获取个人信息" )
                let that = this
                await $.ajax( {
                  url: '/api/public/personal/information',
                  type: "GET",
                  success: ( res ) => {
                    if ( res ) {
                      that.personal = res
                    }
                  },
                  //返回数据的格式
                  dataType: 'json'
                } );
              },
              async getProject() {
                let that = this

                await $.ajax( {
                  url: '/api/public/personal/project/list',
                  type: "GET",
                  success: ( res ) => {
                    if ( res && res.data ) {
                      let arr = res.data
                      that.projectList = arr
                     // console.log( that.projectList )
                      setTimeout( () => {
                        let swiperPortfolio = new Swiper( '.portfolio__container', {
                          cssMode: true,
                          loop: true,
                          navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                          },

                          pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                          },
                        } );
                      }, 1000 )
                    }
                  },
                  //返回数据的格式
                  dataType: 'json'
                } );
              },
              async getSpeciality(){
                let that = this
                await $.ajax( {
                  url: '/api/public/personal/speciality/list',
                  type: "GET",
                  success: ( res ) => {
                    if ( res && res.data ) {
                      let arr =  res.data
                      for(let i=0;i<arr.length;i++ ){
                        arr[i].style =  `--skills__java__percentage: ${arr[i].skilled}%`
                      }
                      that.specialityList = arr
                    }
                  },
                  //返回数据的格式
                  dataType: 'json'
                } );
              },
               async getSkill(){
                let that = this

                await $.ajax( {
                  url: '/api/public/personal/skill/list',
                  type: "GET",
                  success: ( res ) => {
                    if(res && res.data ){
                       that.skillList = res.data
                    } 
                  },
                  //返回数据的格式
                  dataType: 'json'
                } );
              },
              async getExperience(){
                let that = this
                this.workExperience = [],
                this.eduExperience = [],
                await $.ajax({
                  url:'/api/public/personal/experience/list',	
                  type:"GET",
                  success: (res)=>{
                    if ( res && res.data ) {
                      that.workExperience = res.data.filter((v)=>{
                        return v.type == 1
                      })
                       that.eduExperience = res.data.filter( ( v ) => {
                        return v.type == 0
                      } )
                    }
                  },
                  //返回数据的格式
                   dataType: 'json'
                });
              },
              qualificationSwitch(type){//education
              //  console.log(type)
                this.qualification__active = type 
              },
             
            },
        })  
   
    </script>  
  <script src="assets/js/main.js"></script>
  <script>
      ( function () {
         <!--var link = document.createElement( "script" );
        link.src = "./assets/js/bolang.js";

        var s = document.getElementsByTagName( "script" )[0];
        s.parentNode.insertBefore( link, s );-->
      } )();
  </script>
  <script>
   ( function () {
       <!--var link = document.createElement( "script" );
      link.src = "./assets/js/snow.js";

      var s = document.getElementsByTagName( "script" )[0];
      s.parentNode.insertBefore( link, s );-->
    } )();
  </script>
</body>

</html>
